import React, { useEffect } from 'react'
import { Button, Row, Col } from 'antd'
import { connect } from 'umi'
import RelationCard from './RelationCard'

type Props = {
  type: string,
  hero: any,
  dispatch: any
}

function TabItem({ type, hero, dispatch }: Props) {
  useEffect(() => {
    dispatch({ type: "hero/clear", action: type })
  }, [])
  return (
    <div>
      <Button onClick={() => {
        dispatch({ type: "hero/addRelation", prop: type })
      }} type="primary">+ 添加英雄</Button>
      <Row>
        {
          hero[type].map((item: any, index: number) => {
            return <Col span={12} key={index}>
              <RelationCard type={type} index = { index }/>
            </Col>
          })
        }
      </Row>

    </div>
  )
}

const mapStateToProps = (state: any) => {
  const { hero } = state
  return {
    hero
  }
}

export default connect(mapStateToProps)(TabItem)